<!-- 红黄灯预警提醒 -->
<template>
  <el-container class="redYellowLight" style="padding: 0 20px">
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
            <el-form ref="form" :model="queryParams" label-width="130px" size="mini" :inline="true" style="margin-bottom: 10px;">
                <el-row :gutter="24">
                    <el-col :span="5">
                        <el-form-item label="预警范围" style="width: 100%;">
                            <el-select v-model="queryParams.ewRange" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in optionRange"
                                    :key="item.dictId"
                                    :label="item.dictName"
                                    :value="item.dictId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="所属省分" style="width: 100%">
                            <el-cascader
                                v-model="queryParams.province"
                                :options="optionProvince"
                                @change="changeProvince"
                                :show-all-levels="false"
                                clearable>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="所属地市" style="width: 100%">
                            <el-select v-model="queryParams.city" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in optionCity"
                                    :key="item.AREAID"
                                    :label="item.AREANAME"
                                    :value="item.AREAID"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="用户账户" style="width: 100%">
                            <el-input v-model="queryParams.loginName" class="pms-zr-input" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-top: 5px">
                        <el-button size="mini" class="pms-zr-button-primary" @click="doSearch">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
            <template #header-btn>
                <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
            </template>
            <template #body>
                <MyTable
                  id="prjId"
                  ref="myTableRef"
                  :table-data="tableData"
                  :columns="colOption"
                  :col-option-enum="dicLists"
                  :is-selection="true"
                >
                    <template #city="{ scope }">
                        <span>{{ scope.city || '全部' }}</span>
                    </template>
                </MyTable>
                <pagination
                  v-if="pageParam.total > 10"
                  :total="pageParam.total"
                  :page.sync="pageParam.pageNum"
                  :limit.sync="pageParam.pageSize"
                  @pagination="doSearch"
                />
            </template>
        </SearchList>
        <el-dialog
          v-dialogDrag
          :title="title"
          width="50%"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogModel"
        >
            <add-and-edit @close="close" v-if="dialogModel" :dialogForm="dialogForm" :type="type"></add-and-edit>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import SysConst from '@/common/const'
import BtnConfig from "@/components/basic/btnConfig.vue";
import AddAndEdit from "@/views/warningReminder/redYellowLightWarn/components/addAddEdit.vue";
import {deleteEarlyWaring, queryCity, queryEarlyWaring, queryProvince} from "@/api/redYellowLightWarn";
import { getDropdownData } from '@/api/common' // 字典接口
const btnOption = [
    { label: '新增', fun: 'add', type: '' },
    { label: '编辑', fun: 'edit', type: '' },
    { label: '删除', fun: 'delete', type: '' }
]
export default {
    name: 'redYellowLight',
    components: {
        AddAndEdit,
        BtnConfig,
        MyForm,
        SearchPanel,
        SearchList,
        MyTable,
    },
    data() {
        return {
            tableData: [], // 列表数据
            colOption:[
                { label: '预警范围', width: '160', prop: 'ewRange', dicType: 'EARLY_WARNING_RANGE', dicProp: { label: 'dictName', value: 'dictId' } },
                { label: '所属省分', width: '160', prop: 'provinceName' },
                { label: '所属地市', width: '160', prop: 'cityName'},
                { label: '用户账户', width: '200', prop: 'loginName' },
                { label: '用户名称', width: '250', prop: 'name'},
                { label: '邮箱', width: '', prop: 'email'},
            ], // 列表表头
            queryParams: {
                ewRange:'',
                province:[],
                city:'',
                loginName:'',
            }, // 查询条件
            dialogForm: {}, // 弹窗里面数据
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            },
            dialogModel:false, //弹窗显隐
            btnOption,
            title:'添加配置规则',
            dicLists:{},
            optionRange:[],
            optionProvince:[],
            optionCity:[],
            type:'add'
        }
    },
    async created() {
        await this.getDictData();
        this.doSearch();
        this.getProvince();
    },
    methods: {
        // 获取下拉框字典数据
        async getDictData() {
          const arr = ['EARLY_WARNING_RANGE']
          const promises = arr.map(item => getDropdownData(item))
          const results = await Promise.all(promises)
          this.optionRange=results[0].data
          arr.forEach((item, i) => {
            this.$set(this.dicLists, item, results[i].data ?? [])
          })
            console.log(this.dicLists)
        },
        // 列表按钮点击事件
        btnClick(fun, row) {
            this[fun](row)
        },
        getProvince(){
            const params={
                ewRange:'',
                isAdd:'0'
            }
            queryProvince(params).then((res)=>{
                if(+res.code === 200){
                    this.optionProvince=res.data
                }
            })
        },
        changeProvince(code){
            console.log(123,this.queryParams.province,code)
            this.optionCity=[];
            this.queryParams.city='';
            const params={
                province:code.length>0?code[code.length-1]:'',
                isAdd:'0'
            }
            queryCity(params).then((res)=>{
                if(+res.code === 200){
                    this.optionCity=res.data
                }
            })
        },
        doSearch(item){
            console.log('查询',this.queryParams)
            const params={
              ewRange: this.queryParams.ewRange,
              province: this.queryParams.province.length>0?this.queryParams.province[this.queryParams.province.length-1]:'',
              city: this.queryParams.city,
              loginName: this.queryParams.loginName,
              pageNum: item?.page || SysConst.CURRENT_PAGE,
              pageSize: item?.limit || SysConst.PAGESIZE,
            }
            queryEarlyWaring(params).then(res => {
              if (+res.code !== 200) {
                return Promise.reject(res)
              }
              this.tableData = res.data.records
              this.pageParam.total = res.data?.total || 0
              this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
              this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        add(){
            console.log('新增')
            this.dialogForm = {
                id:'',
                ewRange:'',
                province:'',
                city:'',
                loginName:'',
                name:'',
                email:'',
                staffId:''
            };
            this.dialogModel = true;
            this.title='添加配置规则';
            this.type='add';
        },
        edit(row){
            console.log('编辑',row)
            this.dialogForm = {
                ...row[0],
                city:row[0].cityName,
            };
            this.dialogModel = true;
            this.title='编辑配置规则';
            this.type='edit';
        },
        delete(row){
            const params= row.map((item)=>item.id)
            this.$confirm('请确定是否要进行删除？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '是',
                confirmButtonClass: 'pms-zr-button-primary',
                cancelButtonText: '否',
                cancelButtonClass: 'pms-zr-button',
                type: 'info'
            }).then(() => {
                deleteEarlyWaring(params).then(res => {
                    if (+res.code === 200) {
                        this.$message.success('删除成功！')
                        this.doSearch()
                    } else {
                        this.$message.error('删除失败！')
                    }
                })
                console.log('删除')
            }).catch(() => {
                console.log('不删了')
            })
        },
        close(){
            this.dialogModel=false
            this.doSearch();
        },
    }
}
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
    width: 100%;
}
</style>

